<template>
  <div class="rehearse_table">
    <el-table id="data_table"
              :data="table_data"
              stripe
              border
              style="width: 60%; margin: auto">
      <el-table-column prop="date"
                       label="排练时间"
                       sortable/>
      <el-table-column prop="group"
                       label="团名"
                       sortable/>
      <el-table-column align="right" width="145" label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="on_click_release_leave_link(scope.row)"
          >发布请假链接
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="right" width="120" label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="show_absent_list(scope.$index, scope.row)"
          >查看缺勤
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="right" width="120" label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="on_click_add_absent_button(scope.$index, scope.row)"
          >添加缺勤
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="right" width="100" label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              type="danger"
              @click="on_click_remove_data_button(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button slot="reference"
               type="primary"
               icon="el-icon-circle-plus"
               id="add_data_button" @click="on_click_add_data_button">
      添加排练记录
    </el-button>

    <el-button id="statistic_button"
               type="primary"
               icon="el-icon-s-data"
               @click="on_click_statistics_button">
      缺勤信息统计
    </el-button>

    <el-dialog v-model="add_data_card_visible" title="添加排练记录">
      <el-form ref="form"
               :model="form"
               label-width="120px"
               :rules="rules">
        <el-form-item label="活动时间" prop="date">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-col>

        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="on_cancel_add_data">取消</el-button>
        <el-button type="success" @click="on_summit_add_data()">确认</el-button>
      </el-row>
    </el-dialog>
    <el-dialog v-model="absent_list_card_visible" title="缺勤名单">
      <el-table :data="absent_list"
                stripe
                border
                style="width: 80%; margin: auto">
        <el-table-column prop="id"
                         label="学号"
                         sortable/>
        <el-table-column prop="name"
                         label="姓名"
                         sortable/>
        <el-table-column prop="reason"
                         label="原因"/>
        <el-table-column prop="operation"
                         label="操作">
          <template #default="scope">
            <el-button
                size="mini"
                type="danger"
                @click="on_click_remove_absent_button(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-model="add_absent_card_visible" title="添加缺勤">
      <el-form ref="absent_form"
               :model="absent_form"
               label-width="120px"
               :rules="absent_rules">
        <el-form-item label="学号" prop="id">
          <el-input v-model="absent_form.id">如果只填姓名报错，请再填学号</el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="absent_form.name"></el-input>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input v-model="absent_form.reason"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="on_cancel_add_absent">取消</el-button>
        <el-button type="success" @click="on_summit_add_absent">确认</el-button>
      </el-row>
    </el-dialog>


    <el-dialog v-model="statistics_card_visible" title="缺勤统计">
      <rehearse_statistics :group_code="this.group_code"></rehearse_statistics>
    </el-dialog>

    <el-dialog v-model="release_leave_card_visible" title="发布请假链接" width="500px">
      <el-row style="margin-bottom: 20px">
        <el-date-picker type="date"
                        placeholder="选择截止时间"
                        v-model="absent_deadline"
                        style="margin: auto"/>
      </el-row>
      <el-row type="flex" justify="end" >
        <el-button @click="on_cancel_release_leave_link">取消</el-button>
        <el-button type="success" @click="on_summit_release_leave_link()">确认</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Rehearse_statistics from "@/components/absent_statistics";

export default {
  name: "rehearse_table",
  components: {Rehearse_statistics},
  props: ['group_code'],
  data() {
    return {
      object_code: this.$store.state.object_code_dir
          .type2object_code.排练,
      table_data: [],
      absent_list: [], // 用来显示缺勤的人
      add_data_card_visible: false, // 显示 添加排练 的界面
      absent_list_card_visible: false, // 显示 查询缺勤 的界面
      add_absent_card_visible: false, // 显示添加缺勤的界面
      statistics_card_visible: false, // 显示 排练信息统计 的界面
      release_leave_card_visible: false,

      absent_deadline: '',
      rehease_id_to_release_leave_link: '', // 将要发布请假链接的排练的id


      search_box_input: '',
      rehearse_id: '', // 用来表示打开的“缺勤名单”是哪次排练的
      form: {
        date: '',
        clear() {
          this.date = ''
        }
      },
      rules: {
        date: [
          {required: true, trigger: 'blur', message: '请选择时间'},
        ],
      },
      absent_form: {
        id: '',
        name: '',
        reason: '',
        rehearse_id: '', // 填表用不到，但是传递数据要用到
        clear() {
          this.reason = this.id
              = this.name = this.rehearse_id = '';
        }
      },
      absent_rules: {
        id: [{min: 1, max: 20, trigger: 'blur'}],
        name: [
          {required: true, trigger: 'blur', message: '请完成必填项'},
          {min: 1, max: 20, trigger: 'blur'},
        ],
        reason: [{min: 1, max: 20, trigger: 'blur'}]
      }

    }
  },
  methods: {
    on_click_add_data_button() {
      this.add_data_card_visible = true
    },
    on_summit_add_data() {
      // 先把date进行转换
      let data = {
        object_code: this.object_code,
        key: this.$store.state.key,
        group_code: this.group_code,
        year: this.form.date.getFullYear(),
        month: this.form.date.getMonth() + 1, // js从0开始计数
        day: this.form.date.getDate()
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post(this.$store.state.post_site_dir.add_data, data)
              .then((res) => {
                if (res.data.error_code !== 0) {
                  this.$alert("提交失败！")
                  return
                }
                this.reload_table_data() // 刷新一遍，以防有新的东西加入
                this.add_data_card_visible = false;
                this.form.clear()
              })
        }
      })
    },
    on_cancel_add_data() {
      this.add_data_card_visible = false
      this.form.clear();
    },

    on_click_remove_data_button(index, row) {
      // index是从0开始的标号
      // row是这一行的数据
      // 弹出提示窗口确认以后再删除
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(this.$store.state.post_site_dir.remove_data,
            {
              key: this.$store.state.key,
              object_code: this.object_code,
              id: row.id,
            })
            .then((res) => {
              if (res.data.error_code === 0) {
                this.reload_table_data()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {

                this.$message({
                  type: 'info',
                  message: '删除失败，请刷新网页重试！'
                });
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    reload_table_data() {
      axios.post(this.$store.state.post_site_dir.query,
          {
            object_code: this.object_code,
            key: this.$store.state.key,
            group_code: this.group_code
          })
          .then((res) => {
            if (res.data.error_code !== 0) {
              this.$alert("没有权限！")
            } else {
              this.table_data = res.data.data
              let group_name = this.$store.state.perm_code_dir.code2name[this.group_code]
              for (let i = 0; i < this.table_data.length; i++) {
                this.table_data[i]['group'] = group_name
              }
            }
          })
    },


    on_click_release_leave_link(row) {
      this.rehease_id_to_release_leave_link = row.id
      this.release_leave_card_visible = true
    },
    on_summit_release_leave_link() {
      if (this.absent_deadline === '') {
        this.$message.error("请选择截止时间")
        return
      }
      axios.post(this.$store.state.post_site_dir.apply_absent_link, {
        key: this.$store.state.key,
        id: this.rehease_id_to_release_leave_link, // 排练的id
        year: this.absent_deadline.getFullYear(),
        month: this.absent_deadline.getMonth() + 1,
        day: this.absent_deadline.getDate()
      }).then((res) => {
        if (res.data.error_code !== 0) {
          this.$message.error('请刷新页面重试')
        } else {
          this.release_leave_card_visible = false
          this.$alert('http://localhost:8080/apply_for_absent/' + res.data.key, '请假链接', {
            confirmButtonText: '确定',
          });
        }
      })
    },
    on_cancel_release_leave_link() {

    },


    show_absent_list(index, row) {
      // 可能会失败
      this.rehearse_id = row.id
      let rehearse_id = row.id
      let data = {
        object_code: this.object_code,
        key: this.$store.state.key,
        id: rehearse_id
      }
      axios.post(this.$store.state.post_site_dir.query, data)
          .then((res) => {
            if (res.data.error_code !== 0) {
              this.$alert("查询失败")
            } else {
              this.absent_list = res.data.data
              this.absent_list_card_visible = true
            }
          })
    },
    on_click_add_absent_button(index, row) {
      this.absent_form.rehearse_id = row.id
      this.add_absent_card_visible = true
    },
    on_summit_add_absent() {
      // 先把date进行转换
      let data = {
        object_code: this.$store.state.object_code_dir.type2object_code.缺勤,
        key: this.$store.state.key,
        group_code: this.group_code, // 只在当前团里找名字，不同团重名不要紧
        rehearse_id: this.absent_form.rehearse_id,
        student_id: this.absent_form.id,
        student_name: this.absent_form.name,
        reason: this.absent_form.reason,
      }
      this.$refs.absent_form.validate((valid) => {
        if (valid) {
          axios.post(this.$store.state.post_site_dir.add_data, data)
              .then((res) => {
                if (res.data.error_code !== 0) {
                  this.$alert("提交失败！")
                  return
                }
                // 通过页面添加的数据没有group和id，group可以直接算出，id由后端给出
                this.add_absent_card_visible = false;
                this.absent_form.clear()
              })
        }
      })
    },
    on_cancel_add_absent() {
      this.add_absent_card_visible = false
      this.absent_form.clear();
    },
    on_click_remove_absent_button(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(this.$store.state.post_site_dir.remove_data,
            {
              key: this.$store.state.key,
              object_code: this.$store.state.object_code_dir.type2object_code.缺勤,
              rehearse_id: this.rehearse_id,
              student_id: row.id,
            })
            .then((res) => {
              if (res.data.error_code === 0) {
                this.reload_table_data()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败，请刷新网页重试！'
                });
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    on_click_statistics_button() {
      this.statistics_card_visible = true
    },
    to_normal_date(datetime) {
      return datetime.getFullYear() + "年" + (datetime.getMonth() + 1)
          + "月" + datetime.getDate() + "日";
    }
  },
  watch: {
    group_code(newValue, oldValue) {
      this.reload_table_data()
    }
  },
  mounted() {
    this.reload_table_data()
  },

}
</script>

<style scoped>
#data_table {
  top: 170px;
  z-index: 50;
}


#add_data_button {
  text-align: center;
  position: fixed;
  left: 10%;
  top: 100px;
  z-index: 110;
}
#statistic_button {
  text-align: center;
  position: fixed;
  right: 10%;
  top: 100px;
  z-index: 110;
}

</style>